<template>
  <div class="Login_body">
    <div class="top_img">
      <img src="../assets/login_02.png" alt="">
    </div>

    <div class="login_input_list">
      <div class="item_input">
        <i class="ico_img ico_01"></i>
        <input type="text" placeholder="请输入您的手机号" maxlength="11" v-model.number="user_data.phone">
      </div>
      <div class="item_input item_input_add_input">
        <i class="ico_img ico_02"></i>
        <input type="text" placeholder="请输入验证吗" v-model="user_data.code_name"  maxlength="6" >
      </div>
      <button type="button" class="item_input_add_btn">获取验证码</button>
    </div>

    <button type="button" class="sum_btn" @click="login_submit">登录</button>

  </div>
</template>

<script>
  export default {
    name: 'LOGIN',
    data() {
      return {
        user_data:{
          phone: '',
          code_name: ''
        }

      };
    },
    methods: {
      login_submit(){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/12/17 11:52
        *=======================================================
        *@function  登录
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this._const.apiSrc+'index.php?s=apiv&c=api&m=appLogin',
          data:{
            isApp: 1,
            mobile: this.user_data.phone,
            code: this.user_data.code_name
          },
        }).then(function(res){
          var json = res.data ;

          if(json.status){
            console.log(json);
            this._const.user_Data = json.data ;
            window.localStorage.setItem('user_Data',JSON.stringify(json.data)) ;

            this.$store.commit('ADD_COUNT', json.authCode);

            this.$notify({
              message: '登录成功，即将进入首页',
              duration: 1000,
              background: '#44BB00'
            });
            let clock = window.setInterval(() => {
              window.clearInterval(clock) ;
              this.$router.push('/') ;
            },1000)
          }else{
            this.$notify(json.msg);
          }

        }.bind(this)).catch(function(err){

          this.$notify('登录失败,错误：'+err);

        }.bind(this))
      },
    },
    mounted() {
      this.$toast.clear();
    }
  }
</script>


<style lang="scss" scoped>
  .Login_body {
    padding: 50px 60px;
    .top_img {
      margin: 70px 0 60px;
      text-align: center;

    }
    img {
      width: 244px;
      height: 229px;
    }
  }

  .login_input_list{
    .item_input{
      border: 3px solid #cccccc;
      height: 90px;
      line-height: 1rem;
      padding: 0.01rem .2rem 0 1rem;
      border-radius: .1rem;
      margin-bottom: .4rem;
      position: relative;
    }
    .ico_img{
      float: left;
      display: inline-block;
      width: 40px;
      height: 40px;
      background: url(../assets/form_icons.png) no-repeat;
      background-size: 200px 100px;
      top: 25px;
      left: 20px;
      position: absolute;
    }
    .ico_img.ico_01{
      background-position: 0 0;
    }
    .ico_img.ico_02{
      background-position: -40px 0;
    }
    .ico_img.ico_03{
      background-position: -80px 0;
    }
    input{
      height: 83px;
      line-height: 83px;
      width: 100%;
      border: 1px solid transparent;
    }
    .item_input_add_input{
      width: 50%;
      display: inline-block;
    }
    .item_input_add_btn{
      width: 30%;
      float: right;
      display: inline-block;
      padding: 30px 0;
      margin: 0;
      border-radius: .1rem;
      background: #FB6A38;
      font-size: 24px;
      color: #fff;
      border: 1px solid #FB6A38;
    }
  }


  .login_item i.f_ico {
    float: left;
    display: inline-block;
    width: .4rem;
    height: .4rem;
    background: url(../assets/form_icons.png) no-repeat;
    background-size: 2rem 1rem;
    margin-right: .1rem;
    margin-top: .3rem;
  }

  .login_item i.f_ico.ico01 {
    background-position: 0 0;
  }

  .login_item i.f_ico.ico02 {
    background-position: -.4rem 0;
  }

  .login_item i.f_ico.ico03 {
    background-position: -.8rem 0;
  }

  .sum_btn{
    display: block;
    height: 1.2rem;
    width: 100%;
    border: 0;
    line-height: 1.2rem;
    text-align: center;
    border-radius: .1rem;
    font-size: .32rem;
    color: #fff;
    background: -webkit-linear-gradient(left, #f58421, #ef4e34);
  }

</style>
